<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>命令模式典型应用之计数器</title>
</head>
<body>
    <!-- 需求：实现一个计数器“前进”、“后退”、“回到上一步” -->
    <div id="number">0</div>
    <button id="add">+1</button>
    <button id="gofront">前进</button>
    <button id="goback">后退</button>
    <button id="gobackone">回到上一步</button>
    <script>
        let number = document.querySelector('#number');
        // 执行者
        var worker = {
            oldNum: 0,
            history:[0],
            index: -1,
            add() {
                var oldNum = isNaN(number.innerHTML) ? 0 : parseInt(number.innerHTML);
                this.oldNum = oldNum;
                let newNum = oldNum + 1;
                this.history.push(newNum);
                this.index++;
                number.innerText = newNum;
            },
            // 回到上一步
            gobackone() {
                number.innerText = this.oldNum;
            },
            // “前进”
            gofront() {
                if (this.index < this.history.length - 1) {
                    this.index++;
                    number.innerText = this.history[this.index];
                }
            },
            // "后退"
            goback() {
                if (this.index > 0) {
                    this.index--;
                    number.innerText = this.history[this.index];
                }
            }
        }

        // 命令对象
        class AddCommand {
            constructor(receiver) {
                this.receiver = receiver;
            }
            execute() {
                this.receiver.add();
            }
        }
        var addcommand = new AddCommand(worker);

        class BackOneCommand {
            constructor(receiver) {
                this.receiver = receiver;
            }
            execute() {
                this.receiver.gobackone();
            }
        }
        var backOneCommand = new BackOneCommand(worker);

        class GofrontCommand {
            constructor(receiver) {
                this.receiver = receiver;
            }
            execute() {
                this.receiver.gofront();
            }
        }
        var gofrontCommand = new GofrontCommand(worker);

        class GobackCommand {
            constructor(receiver) {
                this.receiver = receiver;
            }
            execute() {
                this.receiver.goback();
            }
        }
        var gobackCommand = new GobackCommand(worker);

        // 调用者
        document.getElementById('add').addEventListener('click', () => addcommand.execute());
        document.getElementById('gobackone').addEventListener('click', () => backOneCommand.execute());
        document.getElementById('gofront').addEventListener('click', () => gofrontCommand.execute());
        document.getElementById('goback').addEventListener('click', () => gobackCommand.execute());
    </script>
    
</body>
</html>